<template>
  <view class="container">
    <!-- 图片 -->
    <image class="avatar" src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc3b39.png" mode="aspectFit"></image>

    <!-- 身份文字 -->
    <text class="identity-text">你当前的身份是“{{ identity }}”</text>

    <!-- 切换身份按钮 -->
    <button class="switch-button" @click="switchIdentity">切换“{{ nextIdentity }}”身份</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      identity: "BOSS", // 当前身份
    };
  },
  computed: {
    // 计算下一个身份
    nextIdentity() {
      return this.identity === "BOSS" ? "牛人" : "BOSS";
    },
  },
  methods: {
    // 切换身份
    switchIdentity() {
      this.identity = this.nextIdentity;
    },
  },
};
</script>

<style>
/* 页面容器 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
  padding: 20px;
}

/* 图片样式 */
.avatar {
  width: 237px;
  height: 158px;
  margin-bottom: 20px;
}

/* 身份文字样式 */
.identity-text {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

/* 按钮样式 */
.switch-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
	border-radius: 32px;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
}

</style>